<style lang="scss" scoped>
* {
    margin: 0;
}

.moot {
    background-color: #f7f7f7;
    width: 100%;
    height: 736px;
}


.top {
    width: 100%;
    height: 122px;
    margin-top: 10px;
    background-color: white;

    div {
        float: left;
        font-size: 20px;
        width: 32%;
        margin-left: 4px;
        text-align: center;

        p:nth-child(2) {
            font-size: 16px;
            color: #666666;
        }
    }
}


.middle {
    width: 100%;
    height: 109px;
    background-color: white;

    div {
        width: 90%;
        margin-left: 18px;
        height: 90px;
        background-color: #f7f7f7;

        h4 {
            margin-bottom: 10px;
            color: #323232;
            font-weight: 400;
        }

        p {
            color: #323232;
        }
    }
}

.button {
    width: 100%;
    height: 75px;
    position: fixed;
    bottom: 0;
    z-index: 999;
 background-color: white;
    button {
        border: none;
        height: 40px;
        width: 383px;
        margin-left: 13px;
        background-color: #39d167;
        color: white;
    }
}



.mount {
    width: 100%;
    height: 422px;
    background-color: white;

    .mount-first {
        margin-bottom: 20px;

        span {
            font-size: 16px;
        }
        span:nth-child(1) {
            width: 80px;
        }
        span:nth-child(2) {
            width: 120px;
            margin-left: 50%;
        }
    }
    .rouyt {
        font-size: 15px;
        width: 94%;
        margin-left: 13px;
        background-color: #f7f7f7;
        line-height: 30px;
    }
}


.toket{
      margin-top: 10px;
     width: 100%;
     height: 247px;
     background-color: white;
     h4{
         margin-left: 10px;
         line-height: 40px;
     }
      .huyt{
        width: 100%;
        height: 100px;
        .left{
         float: left;
         width: 87px;
         height: 87px;
         img{
            float: left;
             width: 100%;
             height: 100%;
         }
        }
        .right{
              float: left;
               width:60%;
               margin-left: 10px;
               line-height: 30px;
        }
      }
}
</style>

<template id="temp">

    <div class="moot">
        <div class="top">
            <div>
                <p>--</p>
                <p>收压缩(mmHg)</p>
            </div>
            <div>
                <p>--</p>
                <p>舒张压(mmHg)</p>
            </div>
            <div>
                <p>--</p>
                <p>心率(次*分)</p>
            </div>
        </div>

        <div class="middle">
            <div>
                <h4>还没有您的血压记录</h4>
                <p>通讯设备上传活手动录入您的体重身高数据,看看健康</p>
                <p>顾问怎么说</p>
            </div>
        </div>

        <!-- 线条图 -->
        <div class="mount">

            <div class="mount-first">
                <span>近七次记录</span>
                <span>查看更多记录></span>
            </div>

            <div></div>


            <div class="rouyt">
                <p>如何更准确地测量血压?首先在有靠的椅子,坐位休</p>
                <p>息至少5分钟;测量时,将绑袖带一侧的前臂放在座子上,</p>
                <p>上臂的中点和心脏在同一水平面,两腿放松、落地。也可以</p>
                <p>坐在沙发上,但任应该注意保持上臂与心脏的水平统一,不可</p>
                <p>一高一低。</p>
            </div>
        </div>


        <div class="toket">
            <h4>智能设备</h4>
            <div class="huyt">
                <div class="left">
                    <img src="../../assets/Snipaste_2024-12-25_10-21-41.png" alt="">
                </div>
                <div class="right">
                    <div>欧姆龙电子血压U32K</div>
                    <div>4</div>
                </div>
            </div>
            <div class="huyt">
                <div class="left">
                    <img src="../../assets/Snipaste_2024-12-25_10-22-33.png" alt="">
                </div>
                <div class="right">
                     <div>脉搏波血压机RBP-9801</div>
                     <div>7</div>
                </div>
            </div>
        </div>
        <div class="button">
            <button>手动入录</button>
        </div>
    </div>
</template>

<script>

</script>